<template>
    <a-dropdown placement="bottomLeft" :trigger="['click', 'hover']" :arrow="true">
        <a-button type="text">
            <template #icon>
                <ant-icon-translation-outlined />
            </template>
            语言
            <ant-icon-down-outlined :style="{ fontSize: '10px' }" />
        </a-button>
        <template #overlay>
            <a-menu @click="(e) => proxy.$i18n.setLocale(e.key)" v-model:selectedKeys="selectedKeys">
                <a-menu-item key="zh-cn">中文简体</a-menu-item>
                <a-menu-item key="en">English</a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
</template>

<script setup>
    import {ref, getCurrentInstance, watch } from 'vue'
    import { useGloabStore } from '@/stores/gloab';

    const { proxy } = getCurrentInstance()
    const gloabStore = useGloabStore()

    const selectedKeys = ref([proxy.$i18n.getLocale()])
    watch(
        () => proxy.$i18n.getLocale(),
        (newValue) => {
            selectedKeys.value = [newValue]
            gloabStore.setLang(newValue)
        },
        { immediate: true }
    )
</script>